<template>
  <div>
    <Topbar />

    <div class="product">
      <div class="content">
        <div class="bgImg">
          <img :src="productBackground.backgroundImageUrl" alt="" />
        </div>
        <div class="product-selection">
          <div class="product-header">
            <img :src="family.iconUrl" alt="" />
            <div class="name-category-container">
              <span>{{ title }}：{{ subTitle }}</span>
              <p>{{ description }}</p>
            </div>
          </div>
          <div
            class="product-notification"
            v-if="notifications.length == 0 ? false : true"
          >
            <span v-for="item in notifications" :key="item.id">{{ item }}</span>
          </div>
          <ol class="options">
            <li v-for="item in products" :key="item.id">
              <div class="product-option">
                <div class="meka-font-display">{{ item.name }} -</div>
                <div class="price">
                  <!-- <div class="xj">{{ item.price.price.discount }}</div> -->
                  {{ item.price.price.full }}
                  <!-- <div class="zk">
                    {{ item.price.price.discountPercentage }}%
                  </div> -->
                </div>
              </div>
            </li>
          </ol>
          <div class="actions">
            <button class="gm">立即购买</button>
            <button class="zl">赠礼</button>
            <button class="tj" @click="addShopCar">
              <i class="iconfont icon-gaunzhu"></i>
              添加至心愿单
            </button>
          </div>
        </div>
      </div>
      <div class="product-requirements">
        <ul>
          <li v-for="item in requirements.requirements" :key="item.id">
            {{ item.text }}
          </li>
        </ul>
      </div>
    </div>
    <div class="media-heading-container" v-if="media">
      <!-- 视频轮播开始 -->
      <template v-if="media">
        <van-swipe :autoplay="autoplay ? 3000 : 0" class="lunbo" prev next>
          <van-swipe-item v-for="item in media.items" :key="item.order">
            <div>
              <video
                id="video"
                @click="mouseOver"
                :controls="controls"
                :src="item.videoUrl"
                :poster="item.thumbnailUrl"
                @timeupdate="updateTime"
                @play="play"
                @pause="paused"
                style="width: 100%; height: 100%; object-fit: fill"
              ></video>
            </div>
          </van-swipe-item>
        </van-swipe>
      </template>
      <!-- 视频轮播结束 -->
    </div>
    <div class="heading">
      <div class="product-heading">
        <h1>{{ heading.title }}</h1>
        <div v-html="heading.summary"></div>
      </div>
      <div
        class="product-feature-section"
        v-for="item in featureSections"
        :key="item.id"
      >
        <h1>{{ item.title }}</h1>
        <p>{{ item.summary }}</p>
        <div
          class="feature"
          v-for="features in item.features"
          :key="features.id"
        >
          <div class="imgs">
            <img :src="features.imageUrl" alt="" />
          </div>
          <h4>{{ features.name }}</h4>
          <div v-html="features.description"></div>
        </div>
      </div>
      <div
        class="storefront-title-system-requirements"
        v-for="item in titleSystemRequirements"
        :key="item.platformId"
      >
        <h3>配置要求</h3>
        <p>{{ item.platformName }}</p>
        <div v-for="item in item.systemRequirements" :key="item.requirementId">
          <div v-for="item in item.systemRequirementElements" :key="item.id">
            <p v-if="item.value" class="iKey">{{ item.key }}</p>
            <p class="iValue">{{ item.value }}</p>
          </div>
        </div>
      </div>
      <div class="product-details">
        <h2>{{ details.title }}</h2>
        <h4>{{ details.genre.title }}</h4>
        <p>{{ details.genre.name }}</p>
        <h4>{{ details.platforms.title }}</h4>
        <p v-for="item in details.platforms.platforms" :key="item.id">
          {{ item.title }}
        </p>
        <h4>{{ details.languages.title }}</h4>
        <p v-for="item in details.languages.languages" :key="item.id">
          {{ item }}
        </p>
        <h4>{{ details.regions.title }}</h4>
        <p v-for="item in details.regions.regions" :key="item.id">
          {{ item }}
        </p>
      </div>
      <div class="requirements">
        <h4>{{ requirements.title }}</h4>
        <ul v-for="item in requirements.requirements" :key="item.id">
          <li>{{ item.text }}</li>
        </ul>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { reqProduct } from "../api/index";
import Footer from "../components/footer.vue";
import Topbar from "../components/topbar.vue";

export default {
  components: { Topbar, Footer },
  data() {
    return {
      data: "",
      productBackground: "",
      requirements: "",
      media: [],
      heading: "",
      autoplay: true,
      controls: false,
      featureSections: "",
      titleSystemRequirements: "",
      details: "",
      title: "",
      family: "",
      subTitle: "",
      description: "",
      notifications: [],
      products: "",
    };
  },
  created() {
    this.$toast.loading({
      message: "加载中...",
      forbidClick: true,
      loadingType: "spinner",
      duration: 0,
    });
  },
  mounted() {
    // 商品详情
    this.getProduct();
  },
  methods: {
    play(e) {
      this.autoplay = false;
    },
    paused(e) {
      this.autoplay = true;
    },
    // 商品详情
    async getProduct() {
      let destination = this.$route.params.destination;
      const {
        productBackground,
        requirements,
        media,
        heading,
        featureSections,
        titleSystemRequirements,
        details,
        title,
        family,
        subTitle,
        description,
        notifications,
        products,
      } = await reqProduct(destination);
      this.productBackground = productBackground;
      this.requirements = requirements;
      this.media = media;
      this.heading = heading;
      this.featureSections = featureSections;
      this.titleSystemRequirements = titleSystemRequirements;
      this.details = details;
      this.title = title;
      this.family = family;
      this.subTitle = subTitle;
      this.description = description;
      this.notifications = notifications;
      this.products = products;
      this.$toast.clear();
    },

    // 记录视频播放时间
    updateTime(e) {
      this.currentTime = e.target.currentTime;
    },

    mouseOver() {
      if (!this.controls) {
        this.controls = true;
      } else {
        this.controls = false;
      }
    },

    // 点击添加购物车
    addShopCar() {
      let obj = {
        famili: this.family,
        title: this.title,
        description: this.description,
        notifications: this.notifications,
        products: this.products[0],
      };
      if (sessionStorage.getItem("shopCart") != undefined) {
        let list = JSON.parse(sessionStorage.getItem("shopCart"));
        list.push(obj);
        sessionStorage.setItem("shopCart", JSON.stringify(list));
      } else {
        let shop = [];
        shop.push(obj);
        sessionStorage.setItem("shopCart", JSON.stringify(shop));
      }
      let islogin = sessionStorage.getItem("islogin");
      if (islogin == null) {
        this.$toast("请先登录");
        this.$router.push("/login");
      } else {
        this.$store.commit("addShopCar", obj);
        this.$router.push("/wishlist");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
@import url("../assets/css/product.css");
</style>
